import { DataBase } from "@/type/global"
import { ProFormText } from "@ant-design/pro-components";
import { Modal, Form, Input } from "antd";
import { FormInstance } from "rc-field-form";
import { useEffect, useRef, useState } from "react";

interface IProps {
    currentData?: DataBase;
    visible: boolean;
    onClose: () => void;
    onOk: (data: DataBase) => void;
}

const DataBaseForm: React.FC<IProps> = (props) => {

    const [form] = Form.useForm<DataBase>();

    useEffect(() => {
        if (props.visible) {
            if (props.currentData) {
                setModel({ ...props.currentData, data: props.currentData.data.join(',') })
            }
        }
    }, [props.visible])

    const [model, setModel] = useState<any>({
        key: '',
        data: '',
        desc: ''
    });

    function onOk() {
        props.onOk({...model})
    }

    function onClose() {
        setModel({
            key: '',
            data: '',
            desc: ''
        });
        props.onClose();
    }

    return <Modal title={model.key ? '编辑数据' : '新建数据'} open={props.visible} onOk={onOk} onCancel={onClose}>
        <Form form={form}>
            <Form.Item label="名称">
                <Input placeholder="请输入名称" value={model.key} onChange={(e) => setModel({ ...model, key: e.target.value })}></Input>
            </Form.Item>

            <Form.Item label="描述">
                <Input placeholder="请输入描述" value={model.desc} onChange={(e) => setModel({ ...model, desc: e.target.value })}></Input>
            </Form.Item>

            <Form.Item label="数据">
                <Input placeholder="请输入数据" value={model.data} onChange={(e) => setModel({ ...model, data: e.target.value })}></Input>
            </Form.Item>
        </Form>
    </Modal>
}

export default DataBaseForm;